<template>
  <view class="container">
    <button right @click="goCircle">发布</button>
    <view class="moments-list">
      <block v-for="(moment, index) in moments" :key="index">
        <view class="moment-item">
          <view class="moment-header">
            <image class="user-avatar" :src="moment.avatar" />
            <text class="username">{{ moment.creatBy }}</text>
            <text class="time">{{ moment.createTime }}</text>
          </view>
          <view class="moment-content">
            <text>{{ moment.content }}</text>
            <image v-if="moment.image" :src="moment.image" class="moment-image" />
          </view>
          <view class="moment-footer">
            <text class="likes">{{ moment.likes }} 赞</text>
            <text class="comments" >评论</text>
            <el-tree :data="commentData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </view>
        </view>
      </block>
    </view>
    <view class="post-new">
      <image class="user-avatar" :src="userAvatar" />
      <input v-model="newPostText" style="height: 40px" placeholder="分享你的生活..." />
      <button @click="addPost">发布</button>
    </view>
  </view>
</template>

<script>
import {findComment, selectCircleList} from "@/api/circle/circle";

export default {
  data() {
    return {
      moments: [],
      newPostText: '',
      userAvatar: 'path/to/user-avatar.jpg', // 用户头像路径
      circleFrom:{},
      defaultProps: {
        children: 'children',
        label: 'commentText'
      },
      commentData:[],
    };
  },
  onLoad() {
    // 这里可以添加获取朋友圈动态的逻辑
  },
  created() {
    this.selectCircle();
    this.findCommentList();
  },
  methods: {
    /** 选择 */
    handleNodeClick(data) {
      console.log(data);
    },
    /** 查询评论 */
    findCommentList(){
      findComment(this.circleFrom).then(res=>{
        this.commentData = res.data
      })
    },
    /** 跳转页面 */
    goCircle(){
      uni.navigateTo({
        url: '/pages/circle/createCircle'
      })
    },
    /** 查询朋友圈动态 */
    selectCircle(){
      selectCircleList(this.circleFrom).then(res => {
        console.log(res)
        this.moments = res.data
      })
    },


    /** 格式化时间 */
    formatTime(time) {
      const seconds = Math.floor((new Date() - time) / 1000);
      let interval = seconds / 31536000;
      if (interval < 1) interval = 1;
      return interval + "年前";
    },
    addPost() {
      if (this.newPostText.trim() === '') return;
      const newMoment = {
        user: '我',
        text: this.newPostText,
        time: new Date(),
        avatar: this.userAvatar,
        image: '', // 这里可以添加图片上传逻辑
        likes: 0,
        relativeTime: this.formatTime(new Date())
      };
      this.moments.unshift(newMoment);
      this.newPostText = '';
    }
  }
};
</script>

<style>
.container {
  padding: 10px;
  background-color: #f5f5f5;
}
.moments-list {
  margin-bottom: 20px;
}
.moment-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.moment-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.username {
  margin-right: auto;
  font-weight: bold;
}
.time {
  font-size: 12px;
  color: #888;
}
.moment-content {
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.5;
}
.moment-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}
.moment-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #888;
}
.likes, .comments {
  cursor: pointer;
}
.post-new {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}
input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}
button {
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/*.container {
  padding: 10px;
  background-color: #f5f5f5;
  background-image: url('static.'); !* 背景图片路径 *!
  background-size: cover; !* 背景图片覆盖整个容器 *!
  background-position: center; !* 背景图片居中显示 *!
  background-repeat: no-repeat; !* 背景图片不重复 *!
}*/
</style>
